import React, { useEffect, useState } from 'react';
import { Grid, GridItem, Input, MainColorType, NumberInput } from '@nova-hf/ui';
import Authentication from 'beta/store/authentication';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import {
  ContractStatus,
  PayerChangeRequestStatus,
  useContractPayerChangeRequestsFromQuery,
  useContractPayerChangeRequestsToQuery,
  useContractsDepartmentAndPayerQuery,
  useCustomerNameLazyQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import PendingPayerChanges from '../../containers/PendingPayerChanges';
import { StillingarLoader } from '../components/StillingarLoader';

import { ChangePayerForm } from './ChangePayerForm';

type PayerSettingsContainerProps = {
  authentication?: Authentication;
  contractId?: string;
  color: MainColorType;
};
const PayersettingsContainer = ({
  authentication,
  contractId,
  color,
}: PayerSettingsContainerProps) => {
  const { t } = useTranslation('stillingar');
  const { query } = useRouter();
  const serviceId = typeof query?.serviceId === 'string' ? query?.serviceId : '';
  const customerId = typeof query?.customerId === 'string' ? query?.customerId : '';

  const [nationalId, setNationalId] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const { data: fromData } = useContractPayerChangeRequestsFromQuery({
    variables: {
      input: {
        id: contractId ?? '',
      },
    },
  });

  const { data: toData } = useContractPayerChangeRequestsToQuery({
    variables: {
      input: {
        id: contractId ?? '',
      },
    },
  });

  const payerRequestsFrom = fromData?.contractPayerChangeRequestsFrom;
  const payerRequestsTo = toData?.contractPayerChangeRequestsTo;
  const hasPendingFrom = payerRequestsFrom?.find(
    (request) => request?.status === PayerChangeRequestStatus.Pending,
  );
  const hasPendingTo = payerRequestsTo?.find(
    (request) => request?.status === PayerChangeRequestStatus.Pending,
  );

  const { data, loading, error } = useContractsDepartmentAndPayerQuery({
    variables: {
      input: {
        customerId,
        serviceId,
      },
    },
    skip: !serviceId || !customerId,
  });

  const [getCustomer] = useCustomerNameLazyQuery({
    onCompleted(data) {
      if (data) {
        if (data.customer?.name && data.customer.nationalId) {
          setName(data.customer.name);
          setNationalId(data.customer.nationalId);
          setEmail(data.customer.email ?? '');
        }
      }
    },
  });

  useEffect(() => {
    settingInitialSelectedDepartment();
  }, [data]);

  const contract = data?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );

  const settingInitialSelectedDepartment = () => {
    if (contract) {
      if (contract.payerId) {
        getCustomer({
          variables: { input: { id: contract.payerId } },
        });
      }
    }
  };

  if (!data || error) return null;
  if (loading) return <StillingarLoader />;
  if (hasPendingFrom || hasPendingTo) return <PendingPayerChanges isInSettings={true} />;

  return (
    <>
      <Grid gridTemplate={{ sm: 4, md: 8 }}>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <NumberInput
            id="nationalId"
            numberType="nationalId"
            label={t('payerSettings.nationalIdLabl')}
            name="nationalId"
            value={nationalId}
            isBold={false}
            disabled
          />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <Input
            id="name"
            label={t('payerSettings.nameLabel')}
            name="name"
            value={name}
            isBold={false}
            disabled
          />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <Input
            id="email"
            label={t('payerSettings.emailLabel')}
            name="email"
            value={email}
            isBold={false}
            disabled
          />
        </GridItem>
      </Grid>
      {authentication?.isStaff && (
        <ChangePayerForm
          payerNationalId={nationalId}
          contractId={contractId}
          customerId={customerId}
          color={color}
        />
      )}
    </>
  );
};

export default inject('authentication')(observer(PayersettingsContainer));